import React, {PureComponent} from 'react';
import {connect} from "react-redux";
import {addNumber} from "../store/features/counter";

class PartTwo extends PureComponent {

    add(num) {
        this.props.addNumber(num)
    }

    render() {
        const {counter, recommends} = this.props;

        const numbers = [1,2,3,5,10]
        return (
            <div>
                Add（{counter}）
                <p>
                    {numbers.map(number => (
                        <button key={number} onClick={e => this.add(number)}>+{number}</button>
                    ))}
                </p>
                <ul>
                    {recommends.map((item, index) => (
                        <li key={index}>{item.title}</li>
                    ))}
                </ul>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    counter: state.counter.counter,
    recommends: state.home.recommends,
})

const mapDispatchToProps = (dispatch) => ({
    addNumber(number) {
        dispatch(addNumber(number))
    },
})

export default connect(mapStateToProps, mapDispatchToProps)(PartTwo);